<template>
  <EditModal title="修改人员">
    <BaseForm />
    <template #prepend-footer>
    </template>
  </EditModal>
</template>

<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { updateUser } from '#/api/gis/user';
import type { EditUserParams } from '#/api/gis/user';
import { message } from 'ant-design-vue';
import { ref, nextTick } from 'vue';
import { z } from '#/adapter/form';

const data = ref();

const [EditModal, EditmodalApi] = useVbenModal({
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = EditmodalApi.getData<Record<string, any>>();
      // 确保 BaseForm 渲染完成后再设置初始值 
      nextTick(() => {
        setTimeout(() => {
          if (data.value) {
            const plainData = JSON.parse(JSON.stringify(data.value));
            // 1.处理备注 
            if (plainData.data.remark === "---") {
              plainData.data.remark = "";
            }
            console.log('  编辑接受到的数据:', plainData);

            // 处理 avatar 字段，将字符串转换为数组 
            if (plainData.data.avatar) {
              plainData.data.avatar = [{ url: plainData.data.avatar }];
            }

            // 设置 BaseForm 的初始值 
            BaseFormApi.setValues(plainData.data, false);
            BaseFormApi.getValues().then((values) => {
              console.log('  获取到的值:', values);
            });
          }
        }, 10); // 延迟 10ms 
      });
    }
  }
});

const [BaseForm, BaseFormApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入用户名',
        disabled: true,
      },
      fieldName: 'userName',
      label: '用户名：',
      rules: z.string()
        .min(5, { message: '用户名至少需要5个字符' })
        .max(10, { message: '用户名最多可以有10个字符' }),
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入姓名',
      },
      fieldName: 'realName',
      label: '姓名：',
      rules: "required"
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      fieldName: 'email',
      label: '邮箱：',
      rules: z.string().email({ message: '请输入有效的邮箱地址' }),
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入电话号码',
      },
      fieldName: 'phoneNumber',
      label: '电话：',
      rules: z.string().regex(/^1[3-9]\d{9}$/, { message: '请输入有效的电话号码' }),
    },
    
    // {
    //   component: 'Upload',
    //   componentProps: {
    //     listType: 'picture-card',
    //     showUploadList: false,
    //     beforeUpload: async (file: File) => {
    //       console.log('上传文件:', file);
    //       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    //       if (!isJpgOrPng) {
    //         message.error('只能上传 JPG/PNG 文件!');
    //         return false;
    //       }
    //       const isLt2M = file.size / 1024 / 1024 < 2;
    //       if (!isLt2M) {
    //         message.error('图片必须小于 2MB!');
    //         return false;
    //       }
    //       try {
    //         const response = await uploadAvatar(file);
    //         console.log('文件成功上传1:', response.data.imgUrl);
    //         // 修改此处：从 response.data 中提取 imgUrl
    //         if (response && response.data && response.data.imgUrl) {
    //           return response.data.imgUrl;
    //         } else {
    //           console.error('无效回应 from uploadAvatar:', response);
    //           message.error('文件上传失败，请重试');
    //           return false;
    //         }
    //       } catch (error) {
    //         console.error('文件上传失败:', error);
    //         message.error('文件上传失败，请重试');
    //         return false;
    //       }
    //     },
    //     onChange(info: UploadChangeParam<UploadFile>) {
    //       const { file, fileList } = info;
    //       if (file.status === 'done') {
    //         // 修改此处：从 file.response.data 中提取 imgUrl
    //         const url = file.response?.data?.imgUrl || file.name;
    //         console.log('文件上传成功2:', url);
    //         message.success('文件上传成功2');
    //         // 确保 fileList 是一个数组
    //         BaseFormApi.setValues({ avatar: [{ url: url }] }, false);
    //       } else if (file.status === 'error') {
    //         console.error('文件上传失败');
    //         message.error('文件上传失败，请重试');
    //       }
    //     },
    //   },
    //   fieldName: 'avatar',
    //   label: '头像',
    //   rules: "required",
    //   renderComponentContent: () => {
    //     return {
    //       default: () => '点击上传图片',
    //     };
    //   },
    // },

    

    {
      component: 'RadioGroup',
      componentProps: {
        options: [
          {
            label: '男',
            value: 0,
          },
          {
            label: '女',
            value: 1,
          },
        ],
      },
      fieldName: 'sex',
      label: '性别：',
      rules: "selectRequired"
    },
  ],
});

// 定义一个自定义事件，用于在修改完数据后刷新页面 
const emit = defineEmits(['refreshTable']);
function onSubmit(values: Record<string, any>) {
  // 在提交时，将 avatar 字段从数组转换回字符串 
  if (values.avatar && values.avatar.length > 0) {
    values.avatar = values.avatar[0].url;
  }
  const params = values as EditUserParams;
  updateUser(params).then(() => {
    EditmodalApi.close();
    message.success('  修改人员成功');
  }).catch((error) => {
    console.error('  修改人员失败:', error);
    message.error('  修改人员失败');
  });
  emit('refreshTable'); // 触发自定义事件 
} 
</script>
